<template>
  <div
    :class="{
      'rule-chain-node': true,
      'input-node': nodeId === 'input-node-9808-11ee-8b83-9b8f64bdd866',
    }"
    :id="getNode().id"
    :style="{ backgroundColor: backgroundColor, borderRadius: record?.name ? '20px' : '8px' }"
  >
    <Popover
      placement="right"
      :mouseEnterDelay="0.5"
      :title="record?.name ? record.name : descriptor?.name"
      overlayClassName="rule-chain-node-popover-card"
    >
      <template #content>
        <div>
          <div v-if="record?.name">
            {{
              COMPONENTS_DESCRIPTOR_TYPE_OPTIONS.find((item) => item.value == descriptor?.type)
                ?.label
            }}
            - {{ descriptor?.name }}
          </div>
          <div v-html="descriptor?.configurationDescriptor?.nodeDefinition?.description"></div>
          <div
            v-if="!record?.name"
            v-html="descriptor?.configurationDescriptor?.nodeDefinition?.details"
          >
          </div>
        </div>
      </template>

      <div class="content">
        <div class="flex items-center">
          <Icon
            class="icon"
            :style="{ color: nameColor }"
            v-if="descriptor?.configurationDescriptor?.nodeDefinition.icon"
            :icon="transportIcon(descriptor.configurationDescriptor.nodeDefinition.icon)"
          />
          <img
            class="w-[16px] h-[16px]"
            v-else-if="descriptor?.configurationDescriptor?.nodeDefinition.iconUrl"
            :src="descriptor.configurationDescriptor.nodeDefinition.iconUrl"
          />
          <Icon class="icon" :style="{ color: nameColor }" :icon="defaultIcon" v-else />
          <span class="node-name" :style="{ color: nameColor }">{{ descriptor?.name }}</span>
        </div>
        <div v-if="record?.name" class="rounded-xl bg-white h-[40px] flex items-center pl-4">
          {{ record?.name }}
        </div>
      </div>
    </Popover>
  </div>
</template>
<script lang="ts" setup name="RuleChainNode">
  import { onMounted, ref, inject, computed } from 'vue';
  import { Icon } from '/@/components/Icon';
  import { Popover } from 'ant-design-vue';
  import { ComponentDescriptor } from '/@/api/thingsborad/componentDescriptor';
  import {
    COMPONENTS_DESCRIPTOR_TYPE_OPTIONS,
    ComponentDescriptorType,
  } from '/@/enums/componentEnum';
  import { RuleNode } from '/@/api/thingsborad/ruleChain';

  const descriptor = ref<ComponentDescriptor>();
  const record = ref<RuleNode>();
  const nodeId = ref<string>('');

  const backgroundColor = computed(
    () =>
      COMPONENTS_DESCRIPTOR_TYPE_OPTIONS.find((item) => item.value == descriptor.value?.type)
        ?.bgcolor || '#00b96b ',
  );

  const nameColor = computed(
    () =>
      COMPONENTS_DESCRIPTOR_TYPE_OPTIONS.find((item) => item.value == descriptor.value?.type)
        ?.color || 'black',
  );

  const getNode = inject('getNode', () => {});
  onMounted(() => {
    const node = getNode() as any;
    nodeId.value = node.id;
    setValue(node.data);
    node.on('change:data', ({ current }) => setValue(current));
  });

  function setValue(data: any) {
    descriptor.value = data.descriptor;
    record.value = data.data;
  }

  const defaultIcon = computed(() => {
    if (ComponentDescriptorType.FILTER == descriptor.value?.type) {
      return 'ant-design:filter-outlined';
    } else if (ComponentDescriptorType.ACTION == descriptor.value?.type) {
      return 'ant-design:thunderbolt-filled';
    } else if (ComponentDescriptorType.EXTERNAL == descriptor.value?.type) {
      return 'ant-design:cloud-upload-outlined';
    } else if (ComponentDescriptorType.FLOW == descriptor.value?.type) {
      return 'ant-design:sisternode-outlined';
    } else if (ComponentDescriptorType.ENRICHMENT == descriptor.value?.type) {
      return 'ant-design:profile-outlined';
    } else if (ComponentDescriptorType.TRANSFORMATION == descriptor.value?.type) {
      return 'ant-design:interaction-outlined';
    } else {
      return '';
    }
  });

  function transportIcon(icon: string) {
    if ('find_replace' == icon) {
      return 'ant-design:interaction-outlined';
    } else if ('content_copy' == icon) {
      return 'ant-design:copy-outlined';
    } else if ('remove_circle' == icon) {
      return 'ant-design:minus-circle-outlined';
    } else if ('add_circle' == icon) {
      return 'ant-design:plus-circle-outlined';
    } else if ('functions' == icon) {
      return 'ant-design:function-outlined';
    } else if ('email' == icon) {
      return 'ant-design:mail-outlined';
    } else if ('notifications_off' == icon) {
      return 'ant-design:bell-outlined';
    } else if ('notifications_active' == icon) {
      return 'ant-design:alert-outlined';
    } else if ('pause' == icon) {
      return 'ant-design:pause-outlined';
    } else if ('repeat' == icon) {
      return 'ant-design:partition-outlined';
    } else if ('menu' == icon) {
      return 'ant-design:align-left-outlined';
    } else if ('calculate' == icon) {
      return 'ant-design:calculator-outlined';
    } else if ('cloud_download' == icon) {
      return 'ant-design:cloud-download-outlined';
    } else if ('file_upload' == icon) {
      return 'ant-design:to-top-outlined';
    } else if ('call_merge' == icon) {
      return 'ant-design:to-top-outlined';
    } else if ('call_made' == icon) {
      return 'ant-design:rise-outlined';
    } else if ('send' == icon) {
      return 'ant-design:send-outlined';
    } else if ('notifications' == icon) {
      return 'ant-design:bell-outlined';
    } else if ('sms' == icon) {
      return 'ant-design:message-outlined';
    } else if ('call_split' == icon) {
      return 'ant-design:cloud-server-outlined';
    } else {
      return 'ant-design:deployment-unit-outlined';
    }
  }
</script>
<style lang="less">
  .input-node:hover {
    font-size: 16px !important;
    cursor: no-drop !important;

    .content {
      .icon {
        font-size: 16px !important;
      }

      img {
        width: 16px !important;
        height: 16px !important;
      }
    }
  }

  .rule-chain-node {
    width: 100%;
    height: 100%;
    padding: 4px 8px;
    background-color: '#00b96b';
    border: 1px solid @border-color-base;
    display: flex;
    align-items: center;
    font-size: 16px;
  }

  .rule-chain-node:hover {
    font-size: 18px;
    cursor: grab;

    .content {
      .icon {
        font-size: 18px;
      }

      img {
        width: 18px;
        height: 18px;
      }
    }
  }

  .content {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .icon {
      font-size: 16px;
    }

    .node-name {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
</style>
